<template>
	<div class="contract">
		<view class="contract-title">
			<h1>租房合同</h1>
		</view>
		<view class="contract-content">
			<p>尊敬的租户：</p>
			<p>欢迎来到我们的公寓！在您正式入住前，请仔细阅读并同意以下租房合同条款：</p>
			<ul>
				<li>第一条：租赁期限为一年，从2023年1月1日至2024年1月1日。</li>
				<li>第二条：每月租金为5000元，需提前一个月支付。</li>
				<li>第三条：租户应保持房屋清洁，不得擅自改动房屋结构。</li>
				<li>更多条款...</li>
			</ul>
		</view>
		<view class="contract-agree">
			<checkbox-group @change="changeAgree">
				<checkbox :value="agree">我已阅读并同意上述条款</checkbox>
			</checkbox-group>


			<button type="primary" @tap="agreeContract" :disabled="!agree">
				我同意,去签约
			</button>
		</view>
	</div>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	let contractId=''
	const agree = ref(false);
	onLoad(async (option) => {
		if (option) {
			contractId=option.contractId

		}
	});
	const agreeContract = () => {
		if (agree.value) {
			uni.redirectTo({
				url: '/pages/signup/personSignup?contractId=${contractId}'
			});
		}
	};
	const changeAgree = () => {
		agree.value = !agree.value
	}
</script>

<style scoped>
	.contract {
		padding: 20px;
	}

	.contract-title h1 {
		text-align: center;
		margin-bottom: 20px;
	}

	.contract-content p {
		margin-bottom: 10px;
	}

	.contract-agree {
		margin-top: 20px;
	}
</style>